<template>
  <el-form-item :label="label" class="search-wrapper">
    <input hidden/>
    <!-- input -->
    <el-input
      v-if="!type"
      :placeholder="placeholder"
      size="medium"
      v-model='cloneValue'
      @input="updateValue"
      @blur="blur"
      >
<!--      <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
      <i slot="suffix" v-show="cloneValue" @click="iconClick" class="el-input__icon el-icon-circle-close"></i>
    </el-input>
    <!-- select -->
    <el-select
      v-if="type === 'select'"
      v-model="cloneValue"
      size="medium"
      clearable
      :placeholder="placeholder"
      @change="updateValue"
    >
      <el-option
        v-for="item in options"
        :key="item[defaultKey.value]"
        :label="item[defaultKey.label]"
        :value="item[defaultKey.value]">
      </el-option>
    </el-select>
    <!--  data/datatime-->
    <el-date-picker
      :type="type"
      v-model="dataValue"
      v-if="type === 'date' || type === 'datetime' || type === 'datetimerange' || type === 'daterange'"
      :placeholder="placeholder"
      size="medium"
      :range-separator="range"
      :start-placeholder="start"
      :end-placeholder="end"
      @change="updateValue"
    >
    </el-date-picker>
   <!-- radio -->
    <el-radio-group
      v-if="type=='radio'"
      v-model="radio" >
      <el-radio
        :label="item[defaultKey.value]"
        v-for="item in options"
        @change="updateValue"
        :key="item[defaultKey.value]">
        {{item[defaultKey.label]}}
      </el-radio>
    </el-radio-group>
   <!-- checkbox -->
    <el-checkbox-group
      v-model="check"
      v-if="type === 'checkbox'"
      @change="updateValue"
      >
      <el-checkbox
        :label="item[defaultKey.value]"
        v-for="item in options"
        :key="item[defaultKey.value]">
        {{item[defaultKey.label]}}
      </el-checkbox>
    </el-checkbox-group>
    <!-- textarea   -->
    <el-input
      type="textarea"
      v-if="type==='textarea'"
      :placeholder="placeholder"
      :maxlength="maxs"
      size="medium"
      v-model='cloneValue'
      @input="updateValue"
      @blur="blur"
    >
    </el-input>
  </el-form-item>
</template>
<script>
import {formatDate} from '@/common/utils'
export default {
  name: 'se-form',
  data () {
    return {
      cloneValue: this.value,
      radio: '',
      dataValue: new Date(''),
      check: []
    }
  },
  /**
    *输入框组件
    *value:输入框默认值
    *name: input的name字段
    *type: input类型 包含select textarea checkbox radio date datetime daterange datetimerange
    *label 输入框前的文字
    *range 时间区间中间的分隔符 默认 ——
    *start 时间区间开始提示文字
    *end 时间区间结束提示文字
    *defaultKey select checkbox radio 指定key value
  */
  props: {
    placeholder: String,
    value: [String, Number, Array, Object, Date],
    label: String,
    type: String,
    options: {
      type: Array,
      default: () => []
    },
    range: {
      type: String,
      default: '—'
    },
    start: {
      type: String,
      default: '开始时间'
    },
    end: {
      type: String,
      default: '结束时间'
    },
    defaultKey: {
      type: Object,
      default: () => {
        return {
          value: 'value',
          label: 'label'
        }
      }
    },
    maxs: {
      type: Number,
      default: 200
    }
  },
  watch: {
    value () {
      this.cloneValue = this.value
    }
  },
  methods: {
    updateValue (val) {
      val = this.formatVal(val)
      this.$emit('input', val)
    },
    blur () {
      this.$emit('blur')
    },
    formatVal (val) {
      if (this.type && this.type.match('range') && !val.length) {
        return ''
      }
      switch (this.type) {
        case 'date':
          return formatDate(val, 'YYYY-MM-DD')
        case 'datetime':
          return formatDate(val, 'YYYY-MM-DD HH:mm:ss')
        case 'datetimerange':
          val[0] = val[0] ? formatDate(val[0], 'YYYY-MM-DD HH:mm:ss') : ''
          val[1] = val[1] ? formatDate(val[1], 'YYYY-MM-DD HH:mm:ss') : ''
          return val
        case 'daterange':
          val[0] = val[0] ? formatDate(val[0], 'YYYY-MM-DD') : ''
          val[1] = val[1] ? formatDate(val[1], 'YYYY-MM-DD') : ''
          return val
      }
      return val
    },
    reset () {
      let _type = Object.prototype.toString.call(this.cloneValue)
      switch (_type) {
        case '[object String]':
          this.cloneValue = ''
          break
        case '[object Date]':
          this.dataValue = new Date('')
          break
        case '[object Number]':
          this.cloneValue = ''
          break
        case '[object Array]':
          this.cloneValue = []
          break
      }
      this.dataValue = new Date('')
      if (this.type && this.type.match('range')) {
        this.updateValue([])
      } else {
        this.updateValue('')
      }
    },
    iconClick () {
      this.cloneValue = ''
      this.updateValue('')
    }
  }
}
</script>

<style lang="scss">
  .search-wrapper{
    margin-bottom: 10px ;
    .el-range-separator{
      color: #ccc;
    }
    .el-form-item__content{
      width: 200px !important;
      .el-input__inner{
        border:1px solid #eee !important;
        height: 42px !important;
      }
      .el-input__icon{
        line-height: 32px !important;
      }
    }
    .el-icon-circle-close{
      cursor: pointer;
    }
    .el-date-editor--date{
      width:  200px;
    }
    .el-select{
      width: 200px;
    }
  }
</style>
